<template>
	<view>
		<view @click="showPicker">
			<slot></slot>
		</view>
		<u-picker :show="visible" :columns="columns" @cancel="visible = false" @confirm="onConfirm" />
	</view>
</template>

<script>
	export default {
		props: {
			columns: {
				type: Array,
				default: () => [],
			},
			value: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				visible: false,
			}
		},
		methods: {
			showPicker() {
				this.visible = true;
			},
			onConfirm(data) {
				const value = data.value.join('-');
				this.$emit('input', value);
				this.visible = false;
			},
		}
	}
</script>

<style>
</style>